<template>
 <div id="content">
            <grid-layout :layout="viewList"
                         :col-num="14"
                         :row-height="30"
                         :is-draggable="editStatus"
                         :is-resizable="editStatus"
                         :vertical-compact="true"
                         :use-css-transforms="true"
            >
                <grid-item v-for="(item, $index) in viewList"
                           :x="item.x"
                           :y="item.y"
                           :w="item.w"
                           :h="item.h"
                           :i="item.i"
                           @resize="resize(item.id)"
                           :class="{bgColor: editStatus}"
                            >
                    <!-- <span class="text">{{item.i}}</span> -->
                    <span v-if="editStatus" @click="deleteIetm($event, $index, item.id)" style="cursor: pointer" class="el-icon-circle-close deleting"></span>
                    <div class="chartContent" @dblclick="loginKPITree(item.text)" :data-id="item.id">{{item.text}}</div>
                </grid-item>
            </grid-layout>
        </div>

</template>
<script>
import { mapState } from "vuex";
import $ajax from "../../service/ajax";
import global from "../../config/global";
import echarts from "echarts";
import VueGridLayout from "vue-grid-layout";

const GridLayout = VueGridLayout.GridLayout;
const GridItem = VueGridLayout.GridItem;

export default {
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      draggable: true,
      resizable: true,
      
    };
  },
  methods: {
      loginKPITree(text) {
      this.$router.push("./kpi");
      this.$store.commit("loadKpiData", text);
    },
      resize(id){
          console.log(id)
          for(let key in this.echartsObj) {
              if(id == this.echartsObj[key].id) {
                  let obj = this.echartsObj[key].chart
                  console.log(obj)
                  obj.resize()
              }
          }
      },
     reload(){
           var vm =  this.$mount('#app')
            vm.$forceUpdate()
        },   
    deleteIetm(event, index, id) {
        console.log(event)
      let ele = event.target.parentNode.getElementsByClassName('chartContent')[0];
      console.log(ele)
      this.$store.commit("removeViewEcharts", id);
      this.$store.commit("deteleView", index);
      this.loadEcharts()
    },
    loadEcharts: function() {
      var _this = this;
      setTimeout(function(){
        if (_this.echartsData.length != 0) {
           
          // _this.$store.commit("getechartsData", data.data.echartsOption);
          let layout = _this.viewList;
          // console.log(layout)

          _this.$nextTick(function(){
            for (let key in layout) {
                let ele = document.querySelector('[data-id="'+ layout[key].id +'"]');
                console.log(ele)
                let myCharts = echarts.init(ele);
                let option = null;
                for(let k in this.echartsData) {
                    if(this.echartsData[k].name == layout[key].text) {
                        option = this.echartsData[k]
                        myCharts.clear()
                myCharts.setOption(option);
                myCharts.resize();
                _this.$store.commit('addEchartsObj', {chart: myCharts, id: layout[key].id})
                    }
                }
                
            }
          }) 
        }
      }, 500)
    
      // });
      window.onresize = function(){
        if(_this.echartsObj.length != 0){
          for(let i in _this.echartsObj){
            _this.echartsObj[i].resize();
          }
        }
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.loadEcharts()
    });
    
  },
  beforeMount(){
// this.loadEcharts()
  },
  created() {

  },
  computed: {
    localComputed() {
      /* ... */
    },
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
      // ...
      viewList: state => state.viewList,
      editStatus: state => state.editStatus,
      saveStatus: state => state.saveStatus,
      echartsData: state => state.echartsData,
      echartsObj: state => state.echartsObj,
      kpiData: state => state.kpiData
    })
    
  }
};
</script>
<style scoped>
#content {
  width: 100%;
}
.bgColor {
  background: rgba(0,0,0,.2);
}
.vue-grid-layout {
  background: #eee;
}

.layoutJSON {
  background: #ddd;
  margin-top: 10px;
  padding: 10px;
}

.eventsJSON {
  background: #ddd;
  margin-top: 10px;
  padding: 10px;
  height: 100px;
  overflow-y: scroll;
}

.columns {
  -moz-columns: 120px;
  -webkit-columns: 120px;
  columns: 120px;
}
.vue-resizable-handle {
  z-index: 5000;
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  /* background: url(""); */
  background-position: bottom right;
  padding: 0 3px 3px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: se-resize;
}

.vue-grid-item:not(.vue-grid-placeholder) {
  /* background: #ccc; */
  border-radius: 3px;
  /* border: 1px solid black; */
}

.vue-grid-item.resizing {
  opacity: 0.9;
}

.vue-grid-item.static {
  background: #cce;
}

.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}

.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}

.vue-grid-item .minMax {
  font-size: 0.2rem;
}

.vue-grid-item .add {
  cursor: pointer;
}

.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}
.chartContent {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.deleting {
  position: absolute;
  right: 0;
  cursor: pointer;
  z-index: 999;
  color: #a2715f;
}
</style>


